<template>
    <swiper :modules="modules" :speed=1000 :loop=true :autoplay="{ delay: 3000, disableOnInteraction: false }">
        <swiper-slide v-for=" item in bannerList" :key=item.id>
            <img :src="item.imgUrl" :alt="item.id">
        </swiper-slide>
    </swiper>
</template>

<script setup lang="ts">
import useHomeStore from '@/store/modules/home'
import { onMounted, ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Autoplay, Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

const homeStore = useHomeStore()
let bannerList = ref<any>([])
const modules = ref([Navigation, Pagination, Autoplay]);

onMounted(() => {
    getBanner()
})
// 获取轮播图数据
const getBanner = async () => {
    await homeStore.getBannerList()
    bannerList.value = homeStore.bannerList
}

</script>
<style scoped lang="scss">
.swiper-wrapper {
    width: 100%;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>